<template>
  <div class="home-container">
    <!-- 欢迎区域 -->
    <div class="welcome-section">
      <div class="welcome-content">
        <h1 class="welcome-title">{{ $t('home.welcomeTitle') }}</h1>
        <p class="welcome-desc">
          {{ $t('home.welcomeDesc') }}
        </p>
      </div>
      <div class="welcome-decoration">
        <div class="decoration-circle circle-1"></div>
        <div class="decoration-circle circle-2"></div>
        <div class="decoration-circle circle-3"></div>
      </div>
    </div>

    <!-- 统计卡片区域 -->
    <div class="stats-section">
      <el-row :gutter="20">
        <el-col
          :xs="24"
          :sm="12"
          :md="6"
          v-for="(card, index) in statisticsCards"
          :key="index"
        >
          <div class="stat-card" :class="`stat-card-${index + 1}`">
            <div class="stat-icon">
              <el-icon><component :is="card.icon" /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ card.value.toLocaleString() }}</div>
              <div class="stat-title">{{ card.title }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 信息卡片区域 -->
    <div class="info-section">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="12">
          <div class="info-card todo-card">
            <div class="card-header">
              <h3>{{ $t('home.todoList') }}</h3>
              <el-tag type="info" effect="plain" size="small"
                >{{ todoList.length }}{{ $t('home.todoItems') }}</el-tag
              >
            </div>
            <div class="card-body">
              <el-table
                :data="todoList"
                style="width: 100%"
                :show-header="false"
              >
                <el-table-column width="40">
                  <template #default="scope">
                    <el-tag
                      :type="
                        scope.row.status === $t('home.completed')
                          ? 'success'
                          : scope.row.status === $t('home.inProgress')
                          ? 'warning'
                          : 'info'
                      "
                      size="small"
                      effect="dark"
                      class="status-dot"
                    ></el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="title" />
                <el-table-column prop="date" width="100" />
                <el-table-column prop="status" width="80" />
              </el-table>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12">
          <div class="info-card notice-card">
            <div class="card-header">
              <h3>{{ $t('home.systemNotice') }}</h3>
              <el-tag type="info" effect="plain" size="small">{{ $t('home.recentUpdate') }}</el-tag>
            </div>
            <div class="card-body">
              <el-timeline>
                <el-timeline-item
                  v-for="(activity, index) in activities"
                  :key="index"
                  :timestamp="activity.timestamp"
                  :type="activity.type"
                  :hollow="true"
                  :size="'large'"
                >
                  <div class="timeline-content">{{ activity.content }}</div>
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 项目进度区域 -->
    <div class="progress-section">
      <div class="progress-card">
        <div class="card-header">
          <h3>{{ $t('home.projectProgress') }}</h3>
          <el-tag type="info" effect="plain" size="small">{{ $t('home.realTimeMonitor') }}</el-tag>
        </div>
        <div class="card-body">
          <el-row :gutter="20">
            <el-col
              :xs="24"
              :sm="12"
              v-for="(item, index) in progressList"
              :key="index"
            >
              <div class="progress-item">
                <div class="progress-info">
                  <span class="progress-name">{{ item.name }}</span>
                  <span class="progress-value">{{ item.value }}%</span>
                </div>
                <el-progress
                  :percentage="item.value"
                  :status="item.status"
                  :stroke-width="10"
                  :show-text="false"
                  class="custom-progress"
                />
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useI18n } from "vue-i18n";
import { User, Goods, ShoppingCart, Money } from "@element-plus/icons-vue";

const { t } = useI18n();

const statisticsCards = computed(() => [
  { title: t('home.userTotal'), value: 12345, icon: "User" },
  { title: t('home.goodsTotal'), value: 8765, icon: "Goods" },
  { title: t('home.orderTotal'), value: 3456, icon: "ShoppingCart" },
  { title: t('home.totalIncome'), value: 123456, icon: "Money" },
]);

const todoList = computed(() => [
  { title: t('home.systemUpdate'), date: "2024-01-15", status: t('home.inProgress') },
  { title: t('home.featureOptimization'), date: "2024-01-16", status: t('home.pending') },
  { title: t('home.bugFix'), date: "2024-01-17", status: t('home.completed') },
  { title: t('home.dataBackup'), date: "2024-01-18", status: t('home.pending') },
]);

const activities = computed(() => [
  { content: t('home.systemUpgradeComplete'), timestamp: "2024-01-15 12:00", type: "success" },
  { content: t('home.newFeatureRelease'), timestamp: "2024-01-14 15:30", type: "info" },
  { content: t('home.systemMaintenanceNotice'), timestamp: "2024-01-13 10:00", type: "warning" },
  { content: t('home.importantUpdate'), timestamp: "2024-01-12 09:00", type: "primary" },
]);

const progressList = computed(() => [
  { name: t('home.projectA'), value: 80, status: "success" },
  { name: t('home.projectB'), value: 65, status: "" },
  { name: t('home.projectC'), value: 45, status: "warning" },
  { name: t('home.projectD'), value: 90, status: "success" },
]);
</script>

<style lang="scss" scoped>
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.home-container {
  padding: 20px;
  background-color: var(--el-bg-color);
  min-height: calc(100vh - 120px);
  position: relative;
  overflow: hidden;

  // 欢迎区域样式
  .welcome-section {
    position: relative;
    background: linear-gradient(
      135deg,
      var(--el-color-primary-light-3) 0%,
      var(--el-color-primary) 100%
    );
    border-radius: 12px;
    padding: 40px 30px;
    margin-bottom: 30px;
    color: var(--el-color-white);
    overflow: hidden;
    box-shadow: 0 10px 20px var(--el-box-shadow);
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 15px 30px var(--el-box-shadow-dark);
      transform: translateY(-5px);
    }

    .welcome-content {
      position: relative;
      z-index: 2;
      max-width: 800px;
    }

    .welcome-title {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 15px;
      background: linear-gradient(
        to right,
        var(--el-color-white),
        var(--el-color-info-light-9)
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: float 6s ease-in-out infinite;
    }

    .welcome-desc {
      font-size: 1.1rem;
      opacity: 0.9;
      line-height: 1.6;
      max-width: 600px;
    }

    .welcome-decoration {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 50%;
      z-index: 1;
      overflow: hidden;

      .decoration-circle {
        position: absolute;
        border-radius: 50%;
        background: rgba(var(--el-color-white-rgb), 0.1);

        &.circle-1 {
          width: 200px;
          height: 200px;
          top: -50px;
          right: -50px;
          animation: pulse 8s infinite ease-in-out;
        }

        &.circle-2 {
          width: 150px;
          height: 150px;
          bottom: 50px;
          right: 100px;
          animation: pulse 12s infinite ease-in-out;
        }

        &.circle-3 {
          width: 100px;
          height: 100px;
          top: 50%;
          right: 30%;
          animation: pulse 10s infinite ease-in-out;
        }
      }
    }
  }

  // 统计卡片区域样式
  .stats-section {
    margin-bottom: 30px;

    .stat-card {
      background: var(--el-bg-color);
      border-radius: 16px;
      padding: 24px;
      height: 130px;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);

      &:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
      }

      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 3px;
        background: var(--el-color-primary);
        transform: translateX(-50%);
        transition: width 0.3s ease;
        border-radius: 3px;
      }

      &:hover::after {
        width: 80%;
      }

      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 6px;
        border-radius: 0 0 8px 8px;
        opacity: 0.85;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
        transition: all 0.3s ease;
      }

      &:hover::before {
        transform: translateY(0);
        opacity: 1;
      }

      &.stat-card-1::before {
        background: linear-gradient(
          135deg,
          var(--el-color-primary-light-3),
          var(--el-color-primary)
        );
      }
      &.stat-card-2::before {
        background: linear-gradient(
          135deg,
          var(--el-color-success-light-3),
          var(--el-color-success)
        );
      }
      &.stat-card-3::before {
        background: linear-gradient(
          135deg,
          var(--el-color-warning-light-3),
          var(--el-color-warning)
        );
      }
      &.stat-card-4::before {
        background: linear-gradient(
          135deg,
          var(--el-color-danger-light-3),
          var(--el-color-danger)
        );
      }

      .stat-icon {
        width: 64px;
        height: 64px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 24px;
        font-size: 26px;
        color: var(--el-color-white);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
        transform: rotate(-5deg);
        transition: all 0.3s ease;
      }

      &:hover .stat-icon {
        transform: rotate(0deg) scale(1.05);
      }

      &.stat-card-1 .stat-icon {
        background: linear-gradient(
          135deg,
          var(--el-color-primary-light-3) 0%,
          var(--el-color-primary-light-5) 100%
        );
      }
      &.stat-card-2 .stat-icon {
        background: linear-gradient(
          135deg,
          var(--el-color-success-light-3) 0%,
          var(--el-color-success-light-5) 100%
        );
      }
      &.stat-card-3 .stat-icon {
        background: linear-gradient(
          135deg,
          var(--el-color-warning-light-3) 0%,
          var(--el-color-warning-light-5) 100%
        );
      }
      &.stat-card-4 .stat-icon {
        background: linear-gradient(
          135deg,
          var(--el-color-danger-light-3) 0%,
          var(--el-color-danger-light-5) 100%
        );
      }

      .stat-content {
        flex: 1;
      }

      .stat-value {
        font-size: 30px;
        font-weight: 700;
        color: var(--el-text-color-primary);
        line-height: 1.2;
        background: linear-gradient(
          90deg,
          var(--el-text-color-primary),
          var(--el-color-primary)
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition: all 0.3s ease;
      }

      .stat-title {
        font-size: 15px;
        color: var(--el-text-color-secondary);
        margin-top: 8px;
        position: relative;
        padding-left: 12px;
        font-weight: 500;
        transition: all 0.3s ease;
      }

      .stat-title::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 14px;
        border-radius: 2px;
        background: var(--el-color-primary-light-5);
        transition: all 0.3s ease;
      }

      &:hover .stat-title::before {
        height: 18px;
        background: var(--el-color-primary);
      }
    }
  }

  // 信息卡片区域样式
  .info-section {
    margin-bottom: 30px;

    .info-card {
      background: var(--el-bg-color);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 5px 15px var(--el-box-shadow-lighter);
      height: 100%;
      margin-bottom: 20px;
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 8px 25px var(--el-box-shadow-light);
      }

      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        border-bottom: 1px solid var(--el-border-color-lighter);

        h3 {
          margin: 0;
          font-size: 18px;
          font-weight: 600;
          color: var(--el-text-color-primary);
        }
      }

      .card-body {
        padding: 20px;
      }

      &.todo-card {
        .status-dot {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          display: inline-block;
        }

        :deep(.el-table) {
          --el-table-border-color: transparent;
          --el-table-header-bg-color: transparent;
          --el-table-row-hover-bg-color: var(--el-fill-color-light);

          .el-table__row {
            border-radius: 8px;
            margin-bottom: 5px;
            transition: all 0.2s;

            &:hover {
              transform: translateX(5px);
            }
          }
        }
      }

      &.notice-card {
        .timeline-content {
          padding: 10px 15px;
          background-color: var(--el-fill-color-light);
          border-radius: 8px;
          margin-bottom: 5px;
          transition: all 0.2s;

          &:hover {
            background-color: var(--el-fill-color);
            transform: translateX(5px);
          }
        }

        :deep(.el-timeline-item__node) {
          box-shadow: 0 0 0 4px rgba(var(--el-color-primary-rgb), 0.2);
        }
      }
    }
  }

  // 项目进度区域样式
  .progress-section {
    .progress-card {
      background: var(--el-bg-color);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 5px 15px var(--el-box-shadow-lighter);
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 8px 25px var(--el-box-shadow-light);
      }

      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        border-bottom: 1px solid var(--el-border-color-lighter);

        h3 {
          margin: 0;
          font-size: 18px;
          font-weight: 600;
          color: var(--el-text-color-primary);
        }
      }

      .card-body {
        padding: 20px;
      }

      .progress-item {
        margin-bottom: 25px;
        padding: 15px;
        border-radius: 10px;
        background-color: var(--el-fill-color-light);
        transition: all 0.3s ease;

        &:hover {
          background-color: var(--el-fill-color);
          transform: translateX(5px);
        }

        &:last-child {
          margin-bottom: 0;
        }

        .progress-info {
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;

          .progress-name {
            font-weight: 500;
            color: var(--el-text-color-primary);
          }

          .progress-value {
            font-weight: 600;
            color: var(--el-color-primary);
          }
        }

        .custom-progress {
          :deep(.el-progress-bar__outer) {
            border-radius: 10px;
            background-color: var(--el-fill-color);
          }

          :deep(.el-progress-bar__inner) {
            border-radius: 10px;
            transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
          }
        }
      }
    }
  }

  // 响应式调整
  @media (max-width: 768px) {
    .welcome-section {
      padding: 30px 20px;

      .welcome-title {
        font-size: 1.8rem;
      }

      .welcome-desc {
        font-size: 1rem;
      }

      .welcome-decoration {
        display: none;
      }
    }

    .stat-card {
      height: auto;
      padding: 18px;
      margin-bottom: 15px;

      &:hover {
        transform: translateY(-5px);
      }

      .stat-icon {
        width: 54px;
        height: 54px;
        font-size: 22px;
        margin-right: 16px;
        transform: rotate(-3deg);
      }

      .stat-value {
        font-size: 24px;
      }

      .stat-title {
        font-size: 14px;
        padding-left: 10px;
      }

      .stat-title::before {
        height: 12px;
      }
    }
  }
}
</style>
